<template>
  <div class="about">
    <van-sticky>
      <van-search placeholder="请输入搜索关键词" v-model="value" @click="$router.push({name:'Search'})"/>
    </van-sticky>

    <van-tree-select height="100%" :items="items" :main-active-index.sync="activeIndex">
      <template slot="content">
        <div v-if="activeIndex === 0" class="right">
         <Flower />
        </div>
        <div v-if="activeIndex === 1">
           <Hot />
        </div>

        <div v-if="activeIndex === 2">
          <Dangao />
        </div>
        <div v-if="activeIndex === 3">
          <Lvzhi />
        </div>
      </template>
    </van-tree-select>

  </div>
</template>
<script>
import Hot from '../components/About/Hot.vue';
import Flower from '../components/About/Flower.vue';
import  Dangao from '../components/About/dangao.vue'
import Lvzhi from '../components/About/lvzhi.vue';

export default {
  data(){
    return{
     activeIndex: 0,
      items: [{ text: '鲜花' }, { text: '热门推荐'},{ text: '蛋糕' },{ text: '绿植花卉' }],
      value:''
    }
  },
  components:{
    Hot,
    Dangao,
    Flower,
    Lvzhi,
  }
}
</script>
<style scoped>

.right{
  margin-left:0.05rem;
  height:100%;
}
</style>
